<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>scope leak demo</title>
</head>

<body>
  <div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <my-component></my-component>
  </div>

  <!-- 在2.2中关于data没有使用函数返回的警告提示是不一样的 -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script>
    Vue.component('my-component', {
      template: '<span>{{ message }}</span>',
      data: {
        message: 'hello'
      }
    })

    var data = {
      counter: 0
    }
    Vue.component('simple-counter', {
      template: '<button v-on:click="counter += 1">{{ counter }}</button>',
      // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
      // 但是我们返回给每个组件的实例却引用了同一个 data 对象
      data: function() {
        return data
      }
    })
    new Vue({
      el: '#example-2'
    })
  </script>
</body>

</html>
